<template>
	<div class="table-box">
		<proTable
			ref="proTableRef"
			:columns="columns"
			:toolButton="false"
			:requestApi="api.GetEmployeeDtoPageApi"
			:initParam="initParam"
			:dataCallback="dataCallback"
		>
			<template #headPortrait="scope">
				<el-image
					v-if="scope.row.headPortrait"
					class="table-td-thumb"
					:src="scope.row.headPortrait"
					:z-index="10"
					:preview-src-list="[scope.row.headPortrait]"
					preview-teleported
				>
				</el-image>
				<span v-else>--</span>
			</template>
		</proTable>
	</div>
</template>

<script setup lang="tsx" name="basetable">
import { ref, reactive } from "vue";
import api from "@/api/modules/employee";
import { ColumnProps } from "@/components/ProTable/interface";
import proTable from "@/components/ProTable/index.vue";
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTableRef = ref();
// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({
	// isSelectSuccess: true
});
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 datalist && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
const dataCallback = (data: any) => {
	return {
		list: data.data,
		total: data.totalCount
	};
};
// 表格配置项
const columns: Partial<ColumnProps>[] = [
	{
		prop: "nickName",
		label: "微信昵称",
		render: scope => {
			return <>{scope.row.nickName ? scope.row.nickName : "--"}</>;
		}
	},
	{ prop: "headPortrait", label: "头像" },
	{ prop: "realName", label: "姓名" },
	{ prop: "phone", label: "手机号", search: { el: "input", props: { placeholder: "请输入手机号" } } },
	{ prop: "idNumber", label: "身份证" },
	{ prop: "registerTime", label: "注册时间" },
	{ prop: "sensor", label: "传感器" },
	{ prop: "teamName", label: "所属团队" },
	{
		prop: "name",
		label: "姓名",
		isShow: false,
		search: { el: "input", props: { placeholder: "请输入姓名" } }
	}
];
</script>
<style>
.table-td-thumb {
	width: 40px;
	height: 40px;
}
</style>
